<template>
  <div class="page-container">
    <div class="search">

      <div class="formBox">
        <el-form class="formClass" :label-width="$globalCss.formLabelWidth_default" label-position="top"
          ref="formSearch" :rules="rules" :model="formData" onsubmit="return false">
          <el-form-item :label="$t('label_operate_network')" prop="placeId">
            <ex_super_input v-model="formData.placeId" class="w_fill" type='select'
              url="/tms-api/base/TmsServiceOutletRpc/selectLikeServiceOutletLabel.json"
              :option="{ label: 'placeName', value: 'id' }" @initList="networkDefault" />
          </el-form-item>
          <el-form-item :label="$tt('label_waybill_code')" prop="code">
            <div class="flex_row_center">
              <el-input v-model.trim="formData.code" clearable class="form_input_default" ref="codeInput"
                v-on:keyup.native="scanCodeKeyInput" @blur="blurCodeInput" style="flex: 1;" />
              <div>
                <el-button class="mg_l2" type="primary" @click="validtrackNumber"><i class="iconfont icon-scan"/> {{ $tt('label_scan') }}</el-button>
                <el-checkbox class="mg_h2" @change="autoFocusSetChange" v-model="autoFocusSet" border>{{
                  $tt('label_auto_focus') }}</el-checkbox>
              </div>
            </div>
          </el-form-item>
          <el-form-item :label="$t('label_prev_station')">
            <ex_super_input v-model="formData.originPlaceName" disabled class="w_fill" />
          </el-form-item>
        </el-form>
      </div>
      <div class="statistics">
        <div class="count">
          {{ formTable.tableData.length }}
        </div>
        <div class="title">{{ $t('label_scan_count') }}</div>
      </div>

    </div>
    <div class="layout-bottom">
      <div class="btns">
        <el-button type="primary" @click="onSubmit('/tms-api/waybill/TmsExpressOperationRpc/express_arrive.json')">{{
          $t('label_submit') }}</el-button>
        <el-button @click="downloadImportTemp">
          {{ $tt('label_download_import_template') }}<i class="el-icon-download el-icon--right"></i>
        </el-button>
        <button_select_file @input="importExcel">
          {{ $tt('label_import') }}
        </button_select_file>
        <el-button @click="downloadXlsx('label_reach')">{{ $t('label_export') }}</el-button>
        <el-button @click="deleteFn">{{ $t('label_delete') }}</el-button>
      </div>
      <el-form :model="formTable" ref="formTableRef" :rules="formTableRules" style="flex: 1;">
        <ex_super_table ref="MainTable" class="main-table" style="height:100%;" v-bind="tableOption"
          :data="formTable.tableData" :autoFlex="true" :autoPage="false" @selection-change="list => selection = list">
        </ex_super_table>
      </el-form>
    </div>
  </div>
</template>
<script>
import expressOperate from '@/mixin/tms-express-operate.js'

export default {
  title: "label_reach",
  mixins: [expressOperate],
  components: {  },
  data() {
    return {
      formData: {
        actionCode: 'EXPRESS_ARRIVE'
      },
      // 扫码查询接口地址
      scanPackageNoUrl: "/tms-api/waybill/TmsExpressQueryRpc/scan_end_before.json",
      tableOption: {
        model: [
          { type: 'selection', clickToggle: true, keyGroup: 'label_table_operate' },
          { key: 'transportNumber', label: 'label_waybill_code', 'min-width': 160, 'show-overflow-tooltip': true, },
          { key: 'currentUsername', label: 'label_operate_user', 'min-width': 120, 'show-overflow-tooltip': true, },
          { key: 'scanTime', label: 'label_scan_time', 'min-width': 120, 'show-overflow-tooltip': true, formatter: (r, c, v) => this.$dateFormat(v) },
          { key: 'originPlaceName', label: 'label_prev_station', 'min-width': 120, 'show-overflow-tooltip': true },
          // { key: 'orderNo', label: 'label_ageing_type', 'min-width': 120, 'show-overflow-tooltip': true },
          {
            key: 'totalWeight', label: 'label_weight', 'min-width': 120, 'show-overflow-tooltip': true,
            render: (h, { column, row, index }) => {
              if (row.edit) {
                return (
                  <el-form-item
                    prop={`tableData.${index}.${column.property}`}
                    rules={this.formTableRules.totalWeight}
                  >
                    <ex_super_input
                      value={row.totalWeight}
                      onInput={value => {
                        this.$set(row, column.property, value)
                      }}
                    >
                    </ex_super_input>
                  </el-form-item>
                )
              } else {
                return (
                  <span>{row.totalWeight}</span>
                )
              }
            }
          },
          { key: 'remark', label: 'label_remark', 'min-width': 120, 'show-overflow-tooltip': true },
          // {
          //   type: 'operate', width: 170, operate: [
          //     {
          //       label: "label_edit",
          //       click: (row) => this.clickEdit(row),
          //       if: (row) => !row.edit
          //     },
          //     {
          //       label: "label_save",
          //       click: (row) => this.clickEditSave(row),
          //       if: (row) => row.edit
          //     },
          //     {
          //       label: "label_remove", class: "button_text_danger",
          //       click: (row, i) => this.removeBox(i)
          //     },
          //   ]
          // }
        ],

      }

    };
  }

};

</script>
<style lang="less" scoped >
.page-container {
  background-color: #F7F8FA;
  box-shadow: none;
  padding: 0;
}

.search {
  display: flex;
  justify-content: space-between;

  .formBox {
    background-color: #fff;
    flex: 1;
    border-radius: 4px;
    padding-top: 12px;

    .formClass {
      width: 800px;
      margin-left: 20px;
    }
  }


  .statistics {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    margin-left: 8px;
    border-radius: 4px;
    width: 30%;

    .count {
      font-size: 80px;
      color: #F56C6C;
    }
  }
}


.btns {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 10px;
}

.layout-bottom {
  margin-top: 8px;
  flex: 1;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  padding: 12px;
}
</style>
